<template>
    <div class="page-container">
        <!---->
        <h-search :search="searchCondition" @search="onSearch"/>
        <!---->
        <div class="table-tool-container">
            <el-button type="success" icon="plus" @click="dialog1Show">新 增</el-button>
        </div>
        <!---->
        <h-table :list="list" :total="total" :options="options" :operates="operates" :columns="columns"/>
        <!---->
        <Pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getPageList"/>
        <!---->
        <add-edit-dialog v-model:show="addDialog.show" :title="addDialog.title" v-model:data="addDialog.formInfo"/>

    </div>
</template>

<script setup name="Htable">
import addEditDialog from './component/addDialog'

/** Base */
import setting from './setting'
const { proxy } = getCurrentInstance()
/** Data */
//Table
const table = reactive({
    columns: setting.columns,
    list: [],
    total: 0,
    searchCondition: [
        { label: '姓名', prop: 'name', placeholder: '请输入', required: false, type: 'input' },
        { label: '班级', prop: 'class', placeholder: '请输入详细地址', required: false, type: 'input' },
        { label: '联系电话', prop: 'phone', placeholder: '请输入采样点联系电话', required: false, type: 'input' },
        { label: '开放时间', prop: 'time', placeholder: '请选择', required: false, type: 'date' },
        {
            label: '支持24小时',
            prop: 'isSupport',
            placeholder: '请选择',
            required: false,
            type: 'select',
            options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
            ],
        },
    ],
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    options: {// table 配置的参数
        stripe: true,
        loading: false,
        highlightCurrentRow: true,
        mutiSelect: true
    },
    operates: {// table 配置的参数
        width: 120,
        fixed: "right",
        label: "操作",
        list: [
            {
                id: "edit", label: "修改", link: true, type: "primary", show: true, disabled: false,
                method: (index, row) => {
                    handleEdit(row)
                }
            },
            {
                id: "del", label: "删除", link: true, type: "primary", show: true, disabled: false,
                method: (index, row) => {
                    handleDel(row)
                }
            }
        ]
    }
})
const {searchCondition, columns, list, total, queryParams, options, operates} = toRefs(table);

// Dialog
const dialog = reactive({
    addDialog: {
        show: false,
        title: '新增',
        formInfo: {},
    },
})
const { addDialog } = toRefs(dialog)

/** 生命周期钩子 */
onMounted(()=>{
    getPageList()
})
function onSearch(data) {
    let _ = proxy
    queryParams.value = Object.assign({}, queryParams.value, { ...data });
    getPageList()
}
/** Method */
function getPageList() {
    let _ = proxy
    console.log('getPageList-queryParams',queryParams.value)
    total.value = 0
    list.value = []
    options.value.loading = true
    for (let i = 0; i < 10; i++) {
        list.value.push({
            id: `123456789${i + 1}`,
            name: `莲塘别墅广场${i + 1}`,
            sex: i%2===0?'男':'女',
            class: `班级${i + 1}`,
            image: i%2===0?'http://wxb1997.oss-cn-beijing.aliyuncs.com/img/基督里维斯和狗.png':'',
            format: i%2===0?'1':'0',
            tag: i%2===0?'1':'0',
            address: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
        });
    }
    total.value = list.value.length || 0
    setTimeout(() => {
        options.value.loading = false
    },500)
}
provide('provideHTable', getPageList)

function dialog1Show() {
    let _ = proxy
    addDialog.value.formInfo = {}
    addDialog.value.show = true
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
